<template>
    <el-row>
        <el-col :lg="{ span: 21,offset:2}" :md="{span: 22}" class="c-container clearfix">
        <div class="content-left">
            <Row class="content_container one-content result" data-scroll-reveal >
              <div class="post-header">
                   <h1 class="post-title">留言</h1>
              </div>
                <div>
                <div id="comment1" class="comment" v-for="item in message">
                    <a class="avatar">
                    <img src="/static/image/foot.png">
                    </a>
                    <div class="content ">
                        <a class="author"> {{item.username}} </a>
                        <div class="metadata">
                            <span class="date"> {{item.date}}</span>
                        </div>		<div class="text"> {{item.content}} </div>
                        <div class="actions">
                            <a class="reply" href="javascript:void(0)" @click="reply(item)">回复</a>
                        </div>
                    </div>
                    <div id="comments1" class="comments">
                        <div id="comment3" class="comment" v-for="(obj,index) of item.subMessage">
                            <a class="avatar">
                                <img src="/static/image/foot.png">	</a>
                            <div class="content topStyle">
                                <a class="author"> {{obj.username}}</a>
                                <div class="metadata">
                                    <span class="date">{{obj.date}} </span>
                                </div>
                                <div class="text">{{obj.content}}</div>
                                <div class="actions">
                                    <a class="reply" href="javascript:void(0)" @click="reply(obj)">回复</a>		</div>	</div>
                        </div>
                    </div>
                </div>
                </div>
                <div>
                    <Card :bordered="false">
                        <Form :model="replayForm">
                            <FormItem prop="username">
                                    <Col span="12">
                                    <Input type="text" v-model="replayForm.username" placeholder="昵称">
                                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                                    </Input>
                                    </Col>
                                    <Col span="12">
                                    <Input type="text" v-model="replayForm.email" placeholder="个人邮箱">
                                    <Icon type="ios-person-outline"></Icon>
                                    </Input>
                                    </Col>
                            </FormItem>
                            <FormItem label="留言内容" prop="content">
                                <Input v-model="replayForm.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请留下你的一点足迹吧！"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formInline')">发表</Button>
                            </FormItem>
                        </Form>
                    </Card>
                </div>
            </Row>
        </div>
        <div class="content-right">
          <RIGHT></RIGHT>
        </div>
        </el-col>
    </el-row>
</template>
<style>
    @import "../../../../static/css/frontend/message/index.css";
</style>
<script>
    import scrollReveal from  'scrollreveal'
    import  '../../../../static/js/public'
    import RIGHT from "../right.vue";
    export default {
        components: {
            RIGHT
        },
        data () {
            return {
                scrollReveal:scrollReveal(),
                es:"333",
                row:{
                    page:1,
                    per_page:20
                },
                name:'站长',
                result:{},
                message:{},
                replayForm:{
                    userId:0,
                    username:'',
                    email:'',
                    content:''

                }
            }
        },
        mounted () {
            this.initMessage();
        },
        watch:{
            result:function () {
                let that = this;
                this.$nextTick(function () {   //或者用 this.$nextTick
                    that.init();
                })
            }
        },
        methods: {
            handleSubmit(){
                let that = this;
                that.fetch({
                    url: '/postMessage',
                    method: 'POST',
                    data:that.replayForm
                }).then(function (response) {
                      if(response.data.ret==1){
                          that.$Message.success('留言成功');
                            that.initMessage();
                      }
                })
            },
            reply(item){
              this.replayForm.userId = item.userId;
              this.name = item.username;
            },
            initMessage(){
                let that = this;
                that.fetch({
                    url: '/getMessage',
                    method: 'GET',
                    params: {
                        page:that.row.page,
                        per_page:that.row.per_page
                    }
                }).then(function (response) {
                  let content = response.data.rows.message;
                    let users = response.data.rows.user;
                    for(var i in content){
                        content[i]['subMessage'] = [];
                        for(var j in users){
                            if(content[i]['userId'] == users[j]['r_id']){
                                content[i]['subMessage'].push(users[j]);
                            }
                        }
                    }
                    console.log(content);
                    that.message = content;
                });
            },
            init: function () {
                var target = this;
                this.scrollReveal.reveal('.result',target.configScroll);
            },
            renferArticle(item){
                this.$router.push({path:'/article?id='+item.id});
            },

        }
    }
</script>
